<template>
	<view class="page_box">
		<view class="head_box ">
			<yy-custom bgColor="bg-gradual-blue" v-if="0">
				<block slot="backText">返回</block>
				<block slot="content">导航栏</block>
			</yy-custom>
		</view>

		<view class="content_box">
			<view class="head bg-img  padding">
				<view class="flex flex-direction">
					<text class="f24">总库存(箱)</text>
					<text class="f60 text-bold margin-top-xs" style="line-height: 1;">{{total}}</text>
				</view>
			</view>
			<view class="padding-lr-sm flex justify-between" style="margin-top: -204rpx;">
				<view class="info  flex flex-direction align-center" v-for="(item, index) in repertory" :key="index">
					<view class="info-inside flex align-center justify-center ">
						<image :src="item.img" mode="aspectFill" style="width: 279rpx; height: 235rpx;" class="bg-gray"></image>
						<view class="info-inside-transparent flex justify-center align-center">库存：{{item.repertoryNum}}</view>
					</view>

					<text class="text-black f30 margin-top-sm">{{item.name}}</text>
					<!-- <text class="text-gray f26 margin-top-sm">净含量：5ml X 20袋</text> -->
				</view>
			</view>
			<view class="padding-lg flex ">
				<text class=" flex flex-direction  " @click="flg(1)" :class="sts == 1 ? 'style' : ''">流入</text>
				<text class=" flex flex-direction mar" @click="flg(2)" :class="sts == 2 ? 'style' : ''">流出</text>
			</view>
			<block v-if="sts == 1">
				<view class="padding flex flex-direction bg-white margin-bottom" v-for="(item, index1) in orderList"
					:key="index1">
					<view class="flex justify-between margin-bottom">
						<view class="mark flex align-center justify-around">
							<text class="cuIcon-favorfill margin-right-xs" style="color: #fbb03b;"></text>
							<text class="f26 text-white">{{item.user.nickname}}</text>
						</view>
						<text class="f24 text-gray">{{item.time}}</text>
					</view>
					<view></view>
					<view class=" flex justify-between  align-center">
						<view class="">
							<view class="padding-tb-xs solid-bottom flex align-center" v-for="(item1, index) in item.order"
								:key="index">
								<view class="radius bg-gray padding-xs" style="width: 100rpx; height: 100rpx;">
									<image :src="item1.commodityImg" mode="aspectFill" class="radius bg-gradual-red wh100"></image>
								</view>
								<view class="flex flex-direction justify-around margin-left-sm">
									<text class="text-black f30 ">{{item1.commodityName}}</text>
									<text class="text-gray f26 ">数量：{{item1.num}}</text>
								</view>
								<text></text>
							</view>
						</view>
						<text class=" text-yellow text-bold">
							<text class="cuIcon-add"></text>
							{{item.totle}}
						</text>
					</view>
				</view>
			</block>
			<block v-if="sts == 2">
				<view class="padding flex flex-direction bg-white margin-bottom" v-for="(item, index1) in orderList"
					:key="index1">
					<view class="flex justify-between margin-bottom">
						<view class="mark flex align-center justify-around">
							<text class="cuIcon-favorfill margin-right-xs" style="color: #fbb03b;"></text>
							<text class="f26 text-white">{{item.user.nickname ? item.user.nickname : item.user.level}}</text>
						</view>
						<text class="f24 text-gray">{{item.time}}</text>
					</view>
					<view></view>
					<view class=" flex justify-between  align-center">
						<view class="">
							<view class="padding-tb-xs solid-bottom flex align-center" v-for="(item1, index) in item.order"
								:key="index">
								<view class="radius bg-gray padding-xs" style="width: 100rpx; height: 100rpx;">
									<image :src="item1.commodityImg" mode="aspectFill" class="radius bg-gradual-red wh100"></image>
								</view>
								<view class="flex flex-direction justify-around margin-left-sm">
									<text class="text-black f30 ">{{item1.commodityName}}</text>
									<!-- <text class="text-gray f26 ">净含量：5ml X 20袋</text> -->
									<text class="text-gray f26 ">数量：{{item1.num}}</text>
								</view>
								<text></text>
							</view>
						</view>
						<text class="text-red text-bold ">
							<text class="cuIcon-move"></text>
							{{item.totle}}
						</text>
					</view>
				</view>
			</block>
		</view>
		<view class="foot_box"></view>
		<!-- 登录提示 -->
		<yy-login v-if="false"></yy-login>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				sts: 1,
				repertory: [],
				total: '',
				orderList: [],
			};
		},
		onShow() {
			// this.invInq(1)
		},
		onLoad(e) {
			this.invInqList()
			this.invInq(1)
		},
		methods: {
			jump(url) {
				console.log('url: ', url);
				uni.navigateTo({
					url
				});
			},
			flg(e) {
				this.sts = e;
				this.invInq(e)
			},

			async invInqList() {
				let res = await this.$u.get('/repertory/' + uni.getStorageSync('data').id, {}, {});
				this.total = res.data.totle;
				this.repertory = res.data.repertory;
			},


			async invInq(init) {
				let res = await this.$u.get('/order/water/', {
					userId: uni.getStorageSync('data').id,
					type: init
				}, {});
				this.orderList = res.data
				console.log('this.repertory',this.orderList)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page_box {
		background-color: #f8f8f8;
		margin-top: -5rpx;

		.content_box {
			.head {
				// margin-top: -5rpx;

				width: 100vw;
				height: 364rpx;
				// background-image: url(https://i.loli.net/2021/04/28/N2POKjco8Cy5TGD.png);
				background-color: #92b9b7;

				.head-list {
					width: 180rpx;
					height: 180rpx;
					background: #769d9b;
					border-radius: 20rpx;
				}

				.invFlow {
					position: absolute;
					right: 0;
					top: 50rpx;
					width: 208rpx;
					height: 60rpx;
					background: #5b8180;
					border-radius: 29rpx 0rpx 0rpx 29rpx;

					image {
						width: 29rpx;
						height: 29rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #ffffff;
					}
				}
			}

			.info {
				width: 340rpx;

				.info-inside {
					position: relative;
					width: 340rpx;
					height: 340rpx;
					background: #ffffff;
					border-radius: 20rpx;

					.info-inside-transparent {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 160rpx;
						height: 50rpx;
						background: #000000;
						opacity: 0.4;

						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
			}

			.style::after {
				content: '';
				width: 50rpx;
				height: 6rpx;
				margin-top: 10rpx;
				background: #fbb03b;
				border-radius: 3rpx;
			}

			.style {
				font-weight: 600;
			}

			.mar {
				margin-left: 100rpx;
			}

			.mark {
				width: 112rpx;
				height: 30rpx;
				background: linear-gradient(139deg, #393b56, #4f4f62);
				border-radius: 10rpx;
			}
		}
	}
</style>
